﻿{extend name="public:base" /}
{block name="css"}
<link href="__ADMIN__/css/tree.css" rel="stylesheet">
<style>
    .city-box {
        display: flex;
        flex-flow: row wrap;
    }

    .all_fold, .fold {
        padding-top: 10px;
    }

    .weight_region, .count_region {
        font-size: 14px;
    }

    .top-module {
        display: flex;
    }
</style>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <a href="{:url('doDatabase')}" class="btn btn-primary btn-lg">新增</a>

                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <input placeholder="请输入搜索内容" type="text" class="form-control form-control-lg">
                            </div>
                        </div>
                        <div class="col-sm-2 m-b-sm">
                            <div class="input-group">
                                <button type="button" class="btn btn-primary btn-lg screen-btn">搜索</button>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <tr>
                                <th>表名</th>
                                <th>注释</th>
                                <th>操作</th>
                            </tr>
                            {volist name="list" id="vo"}
                            <tr>
                                <td>{$vo.name}</td>
                                <td>{$vo.remark}</td>
                                <td class="project-actions">
                                    <a href="{:url('doDatabase', ['id' => $vo.id])}" class="btn btn-white btn-sm"><i class="fa fa-edit"></i>
                                        编辑 </a>
                                    <a href="#" class="btn btn-white btn-sm" onclick="doFields('{$vo.id}')"><i class="fa fa-braille"></i>
                                        设计表 </a>
                                    <a href="{:url('delDatabase', ['id' => $vo.id])}" class="btn btn-white btn-sm ajax-del">
                                        <i class="fa fa-trash-o"></i> 删除 </a>
                                </td>
                            </tr>
                            {/volist}
                        </table>
                        {$list->render()}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--    设计表弹出框    -->
    <div class="modal inmodal" id="myModal3" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="margin: 1rem 19rem;">
            <div class="modal-content animated fadeIn" style="width: 270%">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" onclick="modelClose()">
                        <span aria-hidden="true">&times;</span>
                        <span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">设计表</h4>
                </div>
                <div class="modal-body city-modal" style="height: 640px;">
                    <button type="button" class="btn btn-w-m btn-primary" onclick="addField()">
                        新增字段
                    </button>
                    <div class="fields" style="height: 450px; overflow:hidden; overflow-y: auto;">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>字段名</th>
                                <th>类型</th>
                                <th>长度</th>
                                <th>小数点</th>
                                <th>不是null</th>
                                <th>主键</th>
                                <th>注释</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody class="table_td">
                            <!--<tr onclick="position(0)">
                                <td><input class="mysql_field" type="text"></td>
                                <td>
                                    <div class="input-group">
                                        <select class="form-control form-control-lg mysql_type">
                                            <option value="int">int</option>
                                            <option value="varchar">varchar</option>
                                            <option value="decimal">decimal</option>
                                            <option value="text">text</option>
                                            <option value="date">date</option>
                                        </select>
                                    </div>
                                </td>
                                <td><input type="text" class="mysql_length"></td>
                                <td><input type="text" class="mysql_spot"></td>
                                <td><input type="checkbox" class="mysql_not_null"></td>
                                <td><input type="checkbox" class="mysql_is_primary"></td>
                                <td><input type="text" class="mysql_remark"></td>
                                <td>
                                    <button class="btn btn-white btn-sm"><i class="fa fa-trash-o"></i> 删除</button>
                                </td>
                            </tr>-->
                            </tbody>
                        </table>
                    </div>

                    <div class="box-item">
                        <div class="hr-line-solid"></div>
                    </div>

                    <!--        字段规则        -->
                    <div style="position: fixed; bottom: 124px; height:50px; width: 257%;" id="default-box">
                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">默认</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control rule_default" onblur="changeDefault(this)">
                                </div>
                            </div>
                        </div>
                        <div class="change_int">
                            <div class="box-item">
                                <label class="only_int">
                                    <div class="checkbox-input">
                                        <input type="checkbox" class="rule_is_auto_increase" onclick="changeIsAutoIncrease(this)">
                                    </div>
                                    <span class="checkbox-name">自动递增</span>
                                </label>
                                <label>
                                    <div class="checkbox-input">
                                        <input type="checkbox" class="rule_is_unsigned" onclick="changeIsUnsigned(this)">
                                    </div>
                                    <span class="checkbox-name">无符号</span>
                                </label>
                                <!--<label>
                                    <div class="checkbox-input">
                                        <input type="checkbox" class="rule_is_zerofill" onclick="changeIsZerofill(this)">
                                    </div>
                                    <span class="checkbox-name">补充零</span>
                                </label>-->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-white" onclick="modelClose()">关闭</button>
                    <button type="button" class="btn btn-primary" id="confirmSave">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>


{/block}

{block name='js'}
<script>
    var init_table_js = {
        field: '',
        type: 'int',
        length: '',
        spot: '',
        not_null: '',
        is_primary: '',
        remark: '',
        default: '',
        is_auto_increase: '',
        is_unsigned: '',
        // is_zerofill: '',
        status: 'add',//字段状态； add：新增字段，waitEdit：字段待修改，edit-[原字段名]：字段已修改，delete：字段已删除
    };

    var table_js = [{...init_table_js}];
    var field_index = 0;
    var db_id;

    // 打开 设计表 弹框
    function modelOpen() {
        $('body').addClass('modal-open').append('<div class="modal-backdrop show"></div>');
        $('#myModal3').css('display', 'block').addClass('show');
        $('#default-box').hide();
    }

    // 关闭 设计表 弹框
    function modelClose() {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        $('#myModal3').css('display', 'none').removeClass('show');
    }

    // 设计表
    function doFields(id) {
        db_id = id;

        var url = "{:url('getFieldList')}";
        $.post(url, {
              id: id
          }, res => {
            if(res.result == 1){
                table_js = res.data;
            }
            renderTable();
          }, 'JSON'
        )

        modelOpen();
    }

    // 新增字段
    function addField() {
        table_js.push({...init_table_js});
        renderTable();
    }

    function position(index) {
        field_index = index;
        renderFieldRule(index);
    }

    // 修改字段
    function editField(field_index)
    {
        var field_info = table_js[field_index];
        var status = field_info.status;
        var old_field = field_info.field;// 原字段名

        // 编辑字段
        if (old_field != '' && status == 'waitEdit') table_js[field_index].status = 'edit-' + old_field
    }

    // 修改字段名
    function changeField(that, index) {
        field_index = index;
        editField(field_index);
        table_js[field_index].field = $(that).val();
        renderFieldRule();
    }

    // 修改类型
    function changeType(that, index) {
        field_index = index;
        editField(field_index);
        table_js[field_index].type = $(that).val();
        renderFieldRule();
    }

    // 修改长度
    function changeLength(that, index) {
        field_index = index;
        editField(field_index);
        table_js[field_index].length = $(that).val();
        renderFieldRule();
    }

    // 修改小数点
    function changeSpot(that, index) {
        field_index = index;
        editField(field_index);
        table_js[field_index].spot = $(that).val();
        renderFieldRule();
    }

    // 修改不是null
    function changeNotNull(that, index) {
        field_index = index;
        editField(field_index);
        table_js[field_index].not_null = $(that).is(':checked') ? 1 : 0;
        renderFieldRule();
    }

    // 修改主键
    function changeIsPrimary(that, index) {
        field_index = index;
        editField(field_index);
        var checked = $(that).is(':checked') ? 1 : 0
        table_js[field_index].is_primary = checked;
        if (checked) {
            table_js[field_index].not_null = 1;
            $('.mysql_not_null').eq(field_index).prop('checked', true);
        }
        renderFieldRule();
    }

    // 修改注释
    function changeRemark(that, index) {
        field_index = index;
        editField(field_index);
        table_js[field_index].remark = $(that).val();
        renderFieldRule();
    }

    // 修改默认值
    function changeDefault(that) {
        editField(field_index);
        table_js[field_index].default = $(that).val();
        renderFieldRule();
    }

    // 修改自动递增
    function changeIsAutoIncrease(that) {
        editField(field_index);
        table_js[field_index].is_auto_increase = $(that).is(':checked') ? 1 : 0;
        renderFieldRule();
    }

    // 修改无符号
    function changeIsUnsigned(that) {
        editField(field_index);
        table_js[field_index].is_unsigned = $(that).is(':checked') ? 1 : 0;
        renderFieldRule();
    }

    // 修改补充零
    /*function changeIsZerofill(that) {
        editField(field_index);
        table_js[field_index].is_zerofill = $(that).is(':checked') ? 1 : 0;
        renderFieldRule();
    }*/

    //获取event(兼容火狐)
    function getEvent() {
        if (window.event) {
            return window.event;
        }
        var func = getEvent.caller;
        while (func != null) {
            var arg0 = func.arguments[0];
            if (arg0) {
                if ((arg0.constructor == Event || arg0.constructor == MouseEvent
                    || arg0.constructor == KeyboardEvent)
                  || (typeof (arg0) == "object" && arg0.preventDefault
                    && arg0.stopPropagation)) {
                    return arg0;
                }
            }
            func = func.caller;
        }
        return null;
    }

    // 删除字段
    function delField(index) {
        var e = getEvent();
        e.stopPropagation();//阻止冒泡

        if(table_js[index].field){
            table_js[index].status = 'delete';
        }else{
            table_js.splice(index, 1);
        }
        $('#default-box').hide();
        renderTable();
    }

    //保存
    $('#confirmSave').click(function () {
        var url = "{:url('doTable')}";

        $.post(url, {
            db_id: db_id,
            table_js: table_js
        }, res => {
            if (res.result == 1) {
                setTimeout(function () {
                    window.location.href = res.url;
                }, res.timer)
            } else if (res.result == 2) {
                layer.msg(res.msg);
            }
        }, 'JSON')
    })

    // 渲染数据表字段
    function renderTable() {
        var table_td = '';
        if (table_js.length > 0) {
            table_js.forEach(function (val, key) {
                if(val.status != 'delete'){
                    table_td += '<tr onclick="position(' + key + ')">\n' +
                      '                                <td><input class="mysql_field" type="text" value="' + val.field + '" onblur="changeField(this, ' + key + ')"></td>\n' +
                      '                                <td>\n' +
                      '                                    <div class="input-group">\n' +
                      '                                        <select class="form-control form-control-lg mysql_type" onchange="changeType(this, ' + key + ')">\n' +
                      '                                            <option value="int" ' + (val.type == "int" ? 'selected' : "") + '>int</option>\n' +
                      '                                            <option value="varchar" ' + (val.type == "varchar" ? 'selected' : "") + '>varchar</option>\n' +
                      '                                            <option value="decimal" ' + (val.type == "decimal" ? 'selected' : "") + '>decimal</option>\n' +
                      '                                            <option value="text" ' + (val.type == "text" ? 'selected' : "") + '>text</option>\n' +
                      '                                            <option value="date" ' + (val.type == "date" ? 'selected' : "") + '>date</option>\n' +
                      '                                        </select>\n' +
                      '                                    </div>\n' +
                      '                                </td>\n' +
                      '                                <td><input type="number" min="0" class="mysql_length" value="' + val.length + '" onblur="changeLength(this, ' + key + ')"></td>\n' +
                      '                                <td><input type="number" min="0" class="mysql_spot" value="' + val.spot + '" onblur="changeSpot(this, ' + key + ')"></td>\n' +
                      '                                <td><input type="checkbox" class="mysql_not_null" value="' + val.not_null + '" ' + (val.not_null == 1 ? 'checked' : '') + ' onclick="changeNotNull(this, ' + key + ')"></td>\n' +
                      '                                <td><input type="checkbox" class="mysql_is_primary" value="' + val.is_primary + '" ' + (val.is_primary == 1 ? 'checked' : '') + ' onclick="changeIsPrimary(this, ' + key + ')"></td>\n' +
                      '                                <td><input type="text" class="mysql_remark" value="' + val.remark + '" onblur="changeRemark(this, ' + key + ')"></td>\n' +
                      '                                <td>\n' +
                      '                                    <button class="btn btn-white btn-sm" onclick="delField(' + key + ')"><i class="fa fa-trash-o"></i> 删除</button>\n' +
                      '                                </td>\n' +
                      '                            </tr>';
                }
            })
        }
        $('.table_td').html(table_td);
    }

    // 渲染字段规则
    function renderFieldRule(position_index = '') {
        $('#default-box').show();

        var use_index = position_index !== '' ? position_index : field_index;

        if(table_js[use_index].is_primary){
            $('.only_int').show();
        }else{
            $('.only_int').hide();
        }

        switch (table_js[use_index].type) {
            case 'int':
                $('.change_int').show();
                $('.rule_is_auto_increase').prop('checked', table_js[use_index].is_auto_increase);
                $('.rule_is_unsigned').prop('checked', table_js[use_index].is_unsigned);
                // $('.rule_is_zerofill').prop('checked', table_js[use_index].is_zerofill);
                $('.rule_default').attr('type', 'number');
                break;
            case 'decimal':
                $('.change_int').show();
                $('.rule_is_unsigned').prop('checked', table_js[use_index].is_unsigned);
                // $('.rule_is_zerofill').prop('checked', table_js[use_index].is_zerofill);
                $('.rule_default').attr('type', 'number');
                break;
            default:
                $('.change_int').hide();
                $('.rule_default').attr('type', 'text');
                break;
        }

        $('.rule_default').val(table_js[use_index].default);
        if (table_js[use_index].is_primary || table_js[use_index].type == 'date') {
            $('.rule_default').attr("disabled", "disabled").val('');
        } else {
            $('.rule_default').removeAttr("disabled").val(table_js[use_index].default ? table_js[use_index].default : '');
        }
    }
</script>

{/block}
